<template>
  <template v-for="first in cateData.cate1" :key="first.catId">
    <el-radio-group v-model="cateData.form.first" @change="onFirstChange">
      <el-radio :disabled="isCate" :label="first.catId">{{ first.catName }}</el-radio>
    </el-radio-group>
  </template>
  

  <div class="category">
    <div class="cates">
      <!-- <el-checkbox :disabled="isCate" v-model="checksSecond" :label="true" @change="onChange()">全选</el-checkbox> -->
      <el-checkbox-group :disabled="isCate" v-model="cateData.form.selected" @change="onSecondCateChange">
        <el-checkbox class="cateItems" v-for="second in cateData.cate2" :label="second.catId" :key="second.catId"> {{ second.catName }} </el-checkbox>
      </el-checkbox-group>
    </div>

    <div class="category">
      <div class="cates">
        <!-- <el-checkbox :disabled="isCate" v-model="checks[key]" :label="true" @change="onChange(key)">全选</el-checkbox> -->
        <el-checkbox-group :disabled="isCate" v-model="cateData.form.selected" @change="onThirdCateChange()">
          <el-checkbox class="cateItems" v-for="third in cateData.cate3" :label="third.catId" :key="third.catId"> {{ third.catName }} </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'

const props = defineProps(['cates', 'isCate'])
const emit = defineEmits(['complete'])

watch(
  () => props.cates,
  (val) => {
    if (val) {
      cateData.form.selected = [...val]
    } else {
      cateData.form.selected = []
    }
  }
)

const arr = {
  first: 'I类医疗器械',
  second: 'II类医疗器械',
  third: 'III类医疗器械'
}

const cates = ref([])
const checksSecond = ref(false)

const cateData = reactive({
  form: {},
  cate1: [],
  cate2: [],
  cate3: []
})

const loading = ref(false)

const loadData = async (parId, callback) => {
  loading.value = true
  let { data, err } = await api.get(`/medinstrument/third/goodsCategory/getCategoryByParentId?parId=${parId}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    callback(data.list)
  }
}
// const loadData = async () => {
//   loading.value = true
//   let { data, err } = await api.get(`/medinstrument/third/goodsCategory/getAllGoodsCategory`)
//   loading.value = false
//   if (err) {
//     ElMessage.error(err)
//   } else {
//     cates.value = data.result
//   }
// }

const onFirstChange = (val) => {
  loadData(val, (data) => (cateData.cate2 = data))
}
const onSecondCateChange = (val) => {
  loadData(val[val.length - 1], (data) => (cateData.cate3 = data))
}

const onThirdCateChange = () => {}

// const onChange = (key) => {
//   const checked = checks.value[key]
//   const cateIdsWithKey = cate.value[key].map((e) => e.apparatusCategoryId)
//   if (checked) {
//     const set = new Set([...cateData.form.selected, ...cateIdsWithKey])
//     cateData.form.selected = Array.from(set)
//   } else {
//     const newSelected = []
//     cateData.form.selected.forEach((e) => {
//       if (!cateIdsWithKey.includes(e)) {
//         newSelected.push(e)
//       }
//     })
//     cateData.form.selected = newSelected
//   }

//   trigger()
// }

// const onCateChange = (key) => {
//   const cateIdsWithKey = cate.value[key].map((e) => e.apparatusCategoryId)
//   let hasAll = true
//   cateIdsWithKey.forEach((e) => {
//     if (!cateData.form.selected.includes(e)) {
//       hasAll = false
//     }
//   })
//   checks.value[key] = hasAll

//   trigger()
// }

// const trigger = () => {
//   emit('complete', [...cateData.form.selected])
// }

onMounted(() => {
  // loadData()

  loadData(0, (data) => (cateData.cate1 = data))
})
</script>
<style scoped lang="scss">
.category {
  display: flex;
  align-items: center;

  .title {
    display: inline-block;
    width: 90px;
    height: 20px;
    line-height: 20px;
    margin-right: 25px;
  }

  .cates {
    flex: 1;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px dashed rgba(220, 223, 230, 1);

    .cateItems {
      width: 250px;

      :deep(.el-checkbox__label) {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &.is-checked {
        :deep(.el-checkbox__label) {
          color: var(--color-primary);
        }

        :deep(.el-checkbox__inner),
        :deep(.el-checkbox__inner) {
          background-color: var(--color-primary);
          border-color: var(--color-primary);
        }

        :deep(.el-checkbox__inner)::after {
          border-color: #fff;
        }
      }
    }
  }
}
</style>
